<template>
    <div class="Opus" v-loading="loading" v-if="allInfo">
        <!--      头-->
        <Top>
            <i class="el-icon-arrow-left back" slot="leftPart" @click="goback()"></i>
            <p class="title" slot="midPart">作品集锦</p>
        </Top>
        <!---->
        <h4 class="info clearfix"><img :src="allInfo.teacher.teacher_img" alt=""><span>{{allInfo.teacher.teacher_name}}</span></h4>
        <!--列表-->
        <ul class="imglist">
            <li v-for="(item,index) in allInfo.goodslist" :key="index"><img class="imgFullx" :src="item.url" alt=""></li>
        </ul>
    </div>
</template>

<script>
    //导入相关组件
    import Top from '@/components/smallCom/Top'
    export default {
        name: 'Opus',
        components: {
            Top,//顶部信息组件
        },
        data () {
            return {
                loading:false,//加载动画
                allInfo:null,//数据
            }
        },
        created(){
            this.loading = true;
            this.Posthttp('/?method=flower.teacher.teachergoodslist',{teacher_id:this.$route.query.teacher_id},(res)=>{
                this.loading = false;

                if(JSON.parse(res.bodyText).status ===1){
                    this.allInfo = JSON.parse(res.bodyText).data;
                }else{
                    this.$message.warning(JSON.parse(res.bodyText).msg); 
                }
            });
        },
        methods:{

        }
    }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="scss" scoped>
    .Opus{
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        padding-top: .8rem;
        overflow-y: auto;
        /**/
        .info{
            width: 100%;
            height: .84rem;
            line-height: .84rem;
            background-color: #ececec;
            padding: 0 .2rem;
            img{
                width: .6rem;
                height: .6rem;
                border-radius: 100%;
                float: left;
                margin-top: .12rem;
            }
            span{
                float: left;
                margin-left: .2rem;
            }
        }
        /**/
        .imglist{
            li{
                width: 100%;
                margin-top: .2rem;
            }
        }
    }
</style>
